<template>
  <div class="box">
    <van-search placeholder="请输入搜索关键词" @focus="$router.push('/sou')"/>
    <van-tree-select height="55vw" :items="items" class="tree" :main-active-index.sync="active">
      <template #content>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="../../assets/img/lun.png" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/lun.png" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/lun.png" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/lun.png" alt />
          </van-swipe-item>
        </van-swipe>
        <div id="sub_cate">
          <div class="item" v-for="(item,index) in getCate" :key="index" @click="tooge(item.id)">
            <img :src="item.icon" alt />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      items: [{ text: "所有分类", id: 0 }],
      fenList: [],
    };
  },
  created() {},
  computed: {
    getCate() {
      let data = this.fenList;
      //如果active的值是0，
      if (this.active == 0) {
        return data;
      }
      //当前选中的商品分类的ID
      let id = this.items[this.active].id;
      // console.log(id);
      return data.filter((item) => {
        return item.pid == id;
      });
    },
  },
  mounted() {
    this.fen();
  },
  methods: {
    fen() {
      this.$axios
        .get("https://api.it120.cc/small4/shop/goods/category/all")
        .then((res) => {
          // console.log(res);
          //遍历所有的商品分类，然后找出pid==0的商品
          let data = res.data.forEach((item) => {
            if (item.pid == 0) {
              //顶级分类
              //实例化对象
              let object = new Object();
              object.id = item.id;
              object.text = item.name;
              this.items.push(object);
            }
          });
          this.fenList = res.data;
        });
    },
    tooge(cid) {
      this.$router.push("/cate/" + cid);
    },
  },
};
</script>

<style scoped lang="less">
.box {
  width: 100%;
  .tree {
    height: 100% !important;

    #sub_cate {
      width: 65%;
      max-height: 85%;
      position: fixed;
      overflow: scroll;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 0.2rem;
      .item {
        width: 31%;
        margin: 1%;
        text-align: center;
        img {
          width: 96%;
          margin-left: 2%;
        }
        p {
          line-height: 0.55rem;
        }
      }
    }
  }
  .my-swipe {
    margin-left: 0.4rem;
    img {
      width: 4.25rem;
      height: 2.6rem;
    }
  }
}
</style>
